<template>
  <div id="recommend">
    <div class="recommend-title" v-if="showType==='recommend'">
      歌曲推荐
<!--      {{requestGetRequestCount}}<br>-->
<!--      {{testVuexGetter}}-->
      {{testVuexGetter1}}<br>
<!--      {{myTestGetters}}{{getTestLength}}<br>-->
<!--      <button @click="printTest('test')">click</button>-->
<!--      <button @click="addMyObj({name:'hg',age:10})">click</button>-->
<!--      <button @click="testAction">action</button>-->
<!--      <button @click="addStringActions">addStringActions</button>-->
<!--      <button @click="testTest1">testTest</button>-->
<!--      <input v-model="inputModel">{{myInputModel}}-->
    </div>
    <div class="recommend-title" v-else-if="showType==='like'">
      猜你喜欢听
    </div>
    <music-home-detail v-for="(music,index) in getTopRecommendMusic(count)" :key="index"
                       :music="music"></music-home-detail>
  </div>
</template>

<script>
  import MusicHomeDetail from './MusicHomeDetail.vue'
  import {recommendSong} from '../api/song'
  import {Toast} from 'mint-ui'
  import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'

  export default {
    name: 'HelloWorld',
    components: {
      MusicHomeDetail
    },
    props: {
      count: {
        type: Number,
        default: 3
      },
      showType: {
        type: String,
        default: 'recommend'
      }
    },
    // data() {
    //   // return {
    //   //   recommendMusic: []
    //   // }
    // },
    computed: {
      // getTopRecommendMusic() {
      //   if (this.recommendMusic.length < this.count) {
      //     return this.recommendMusic
      //   } else {
      //     let offset = Math.random() * (this.recommendMusic.length - this.count)
      //     return this.recommendMusic.slice(offset, this.count + offset)
      //   }
      // },
      testVuex() {
        return this.$store.state.song.test;
      },
      testVuexGetter() {
        return this.$store.getters.myTestGetters;
      },
      testVuexGetter1() {
        return this.$store.getters.getTestLength;
      },
      ...mapState({
        test: state => state.song.test,
        recommendMusic: state => state.song.recommendMusic
      }),
      ...mapGetters([
        'myTestGetters',
        'getTestLength',
        'getTopRecommendMusic',
        'getRequestCount',
        'myInputModel'
      ]),
      requestGetRequestCount() {
        return this.$store.getters['request/getRequestCount']
      },
      inputModel: {
        get() {
          return this.$store.state.song.inputModel
        },
        set(value) {
          this.$store.commit('addInputModel', value)
        }
      }
    },
    mounted: function () {
      // this.getRecommendSong()
      this.storeGetRecommendSong().catch((error) => {
        Toast({
          message: error,
          position: 'middle'
        });
      })
      // console.log(this.$el)
    },
    methods: {
      // getRecommendSong: function () {
      //   recommendSong().then((res) => {
      //     console.log(res.data.msg)
      //     this.recommendMusic = res.data.data
      //     // throw new Error('出错啦')
      //   }).catch((error) => {
      //     console.log(error)
      //     Toast({
      //       message: error,
      //       position: 'middle'
      //     });
      //   })
      // },
      printTest(boo) {
        // console.log(this.$store.getters.getMyTest(boo))
        // this.$store.commit('addString')
        // this.$store.commit('addMyString', boo)
        this.$store.commit({
          type: 'addMyString',
          text: 'love'
        })
      },
      printTestNew(stu) {
        // this.$store.commit('addMyObj', stu)
        this.$store.commit('addMyObj', stu)
      },
      ...mapMutations([
        'addMyObj',
        'addInputModel'
      ]),
      testAction() {
        this.$store.dispatch('addStringActions').then(() => {
          console.log('action then')
        })
      },
      ...mapActions([
        'addStringActions',
        'storeGetRecommendSong',
        'request/testTest'
      ]),
      testTest1() {
        // console.log('in')
        // console.log(this.$store)
        // this.$store.dispatch('request/testTest')
        this['request/testTest']()
      }
    },
    beforeRouteUpdate(to, from, next) {
      // 对路由变化作出响应...
      // console.log("move")
      // this.getRecommendSong()
    }
  }
</script>
<style>
  #recommend {
    margin-top: 20px;
  }

  .recommend-title {
    margin-left: 2%;
    font-weight: bold;
  }
</style>
